<template>
	<div>
		<div class="banner">
			<van-swipe :autoplay="3000" lazy-render>
				<van-swipe-item v-for="image in images" :key="image">
					<img :src="image" />
				</van-swipe-item>
			</van-swipe>

			<van-card
				v-for="v in list"
				:key="v.id"
				:price="v.price.toFixed(2)"
				:desc="v.desc"
				:title="v.title"
				class="goods-card"
				:thumb="v.url"
				@click="$router.push({ name: 'detail', params: { id: v.id } })"
			/>
		</div>
	</div>
</template>


<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useStore } from 'vuex';
import { StateType } from '@/store'
export default defineComponent({
	setup() {
		const store = useStore<StateType>()
		const list = computed(() => store.state.list)

		const images = [
			'https://img.yzcdn.cn/vant/apple-1.jpg',
			'https://img.yzcdn.cn/vant/apple-2.jpg',
		];

		onMounted(() => {
			store.dispatch('fetch_list')
		})

		return { images, list };
	},
});

</script>


<style>
img {
	width: 100%;
	height: 200px;
}
</style>

